<template>
  <view class="container">
    <view class="form">
      <view class="form-item">
        <text class="label">所在城市:</text>
        <input
          class="input"
          placeholder="如杭州市"
          v-model="formData.city"
          placeholder-class="placeholder"
        />
      </view>

      <view class="form-item">
        <text class="label">小区/大厦/学校:</text>
        <input
          class="input"
          placeholder="如杭师大合前校区"
          v-model="formData.department"
          placeholder-class="placeholder"
        />
      </view>

      <view class="form-item">
        <text class="label">楼号-门牌号:</text>
        <input
          class="input"
          placeholder="A号楼B层"
          v-model="formData.houseNumber"
          placeholder-class="placeholder"
        />
      </view>

      <view class="form-item">
        <text class="label">收货人:</text>
        <input
          class="input"
          placeholder="请填写收货人的姓名"
          v-model="formData.name"
          placeholder-class="placeholder"
        />
      </view>

      <view class="form-item">
        <text class="label">联系电话:</text>
        <input
          class="input"
          placeholder="请填写收货手机号"
          v-model="formData.phone"
          placeholder-class="placeholder"
          type="number"
        />
      </view>
    </view>
    <view class="btn">
      <!-- <button class="cancel" @click="saveAddress">取消</button> -->
      <button class="save-btn" @click="saveAddress">保存</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        id: '',  
        city: "",
        department: "",
        houseNumber: "",
        name: "",
        phone: ""
      },
      isEdit: false  // 标记是否为编辑模式
    };
  },
  onLoad(options) {
    if (options.id) {
      this.isEdit = true;
      this.getAddressDetail(options.id);
    }
  },
  methods: {
    // 获取地址详情
    getAddressDetail(id) {
      uni.request({
        url: `http://localhost:3000/address/${id}`,
        success: (res) => {
          uni.hideLoading();
          if (res.data) {
            this.formData = res.data;
          }
        },
        fail: () => {
          uni.hideLoading();
          uni.showToast({
            title: '获取地址失败',
            icon: 'none'
          });
        }
      });
    },

    // 表单验证
    validateForm() {
      if (!this.formData.city) {
        uni.showToast({ title: '请填写所在城市', icon: 'none' });
        return false;
      }
      if (!this.formData.department) {
        uni.showToast({ title: '请填写详细地址', icon: 'none' });
        return false;
      }
      if (!this.formData.houseNumber) {
        uni.showToast({ title: '请填写楼号-门牌号', icon: 'none' });
        return false;
      }
      if (!this.formData.name) {
        uni.showToast({ title: '请填写收货人姓名', icon: 'none' });
        return false;
      }
      if (!/^1[3-9]\d{9}$/.test(this.formData.phone)) {
        uni.showToast({ title: '请填写正确的手机号', icon: 'none' });
        return false;
      }
      return true;
    },

    // 保存地址
    saveAddress() {
      if (!this.validateForm()) return;

      uni.showLoading({ title: '正在保存中...' });
      
      const url = this.isEdit 
        ? `http://localhost:3000/address/${this.formData.id}`
        : 'http://localhost:3000/address';
      
      const method = this.isEdit ? 'PUT' : 'POST';

      uni.request({
        url,
        method,
        data: this.formData,
        success: (res) => {
          uni.hideLoading();
          if (res.statusCode === 200 || res.statusCode === 201) {
            uni.showToast({ title: '保存成功' });
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
          } else {
            uni.showToast({ title: '保存失败', icon: 'none' });
          }
        },
        fail: () => {
          uni.hideLoading();
          uni.showToast({ title: '网络错误', icon: 'none' });
        }
      });
    }
  }
};
</script>
<style>
.container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.title {
  font-size: 36px;
  font-weight: bold;
}

.form {
  background-color: #fff;
  border-radius: 10px;
  padding: 0 20px;
}

.form-item {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}

.form-item:last-child {
  border-bottom: none;
}

.label {
  /* width: 160px; */
  font-size: 20px;
  color: #333;
  margin-right: 10px;
}

.input {
  flex: 1;
  font-size: 20px;
}

.placeholder {
  color: #999;
  font-size: 20px;
}
.btn {
  display: flex;
}

.btn .cancel {
  margin-top: 50px;
  background-color: red;
  color: #fff;
  border-radius: 50px;
  width: 100px;
}
.save-btn {
  margin-top: 50px;
  background-color: #007aff;
  color: #fff;
  border-radius: 50px;
  width: 100px;
}
</style>